<template>
  <el-select
    v-model="value"
    filterable
    clearable
    remote
    :size="size"
    reserve-keyword
    placeholder="搜索域名"
    :remote-method="remoteSearchWebsite"
    :loading="remoteSearchWebsiteloading"
    @change="handleConfirm"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import qs from 'qs'
export default {
  name: 'SingleWebsiteSelect',
  props: ['website', 'size'],
  data() {
    return {
      options: [],
      value: [],
      remoteSearchWebsiteloading: false
    }
  },
  watch: {
    website(v) {
      this.options = []
      console.log('pass websites', v)
      if (v) {
        this.value = v
        GetWebsite(v).then(response => {
          this.options.push({ 'label': response.data.domain, 'value': response.data.value })
          return { 'label': response.data.domain, 'value': response.data.value }
        })
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('change', this.value)
      console.log('emit value', this.value)
    },
    remoteSearchWebsite(query) {
      if (query !== '') {
        this.remoteSearchWebsiteloading = true
        GetWebsite(null, qs.stringify({
          kw: query,
          pagesize: 5,
          page: 1
        })).then(response => {
          this.options = response.data.data.map(v => {
            v.label = v.domain
            v.value = v.id
            return v
          })
          this.remoteSearchWebsiteloading = false
        })
      } else {
        this.options = []
        this.remoteSearchWebsiteloading = false
      }
    },
    notify(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>
